<template>
  <el-form label-width="100px" v-show="visible">
    <!-- SPU名称 -->
    <el-form-item label="SPU名称">
      <el-input type="text" v-model="spuInfo.spuName" placeholder="请输入SPU名称"></el-input>
    </el-form-item>
    <!-- SPU品牌 -->
    <el-form-item label="SPU品牌">
      <!-- 下拉菜单 -->
      <el-select v-model="spuInfo.tmId" placeholder="请选择SPU品牌">
        <el-option :label="tm.tmName" :value="tm.id" v-for="(tm,index) in trademarkList" :key="tm.id"></el-option>
      </el-select>
    </el-form-item>
    <!-- SPU描述信息 -->
    <el-form-item label="SPU描述">
      <el-input type="textarea" rows="4" v-model="spuInfo.description" placeholder="请输入SPU描述内容"></el-input>
    </el-form-item>
    <!-- SPU图片列表 -->
    <el-form-item label="SPU图片">
      <el-upload action="/dev-api/admin/product/fileUpload" list-type="picture-card"
        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload" :file-list="spuImageList" multiple>
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-form-item>
    <!-- 销售属性 -->
    <el-form-item label="销售属性">
      <!-- 下拉菜单 -->
      <el-select v-model="attrIdAttrName"
        :placeholder="`${unSelectedSaleAttrList.length>0?`还有${unSelectedSaleAttrList.length}个未选择`:'没有了'}`">
        <el-option :label="saleAttr.name" :value="saleAttr.id +':' + saleAttr.name" v-for="(saleAttr,index) in saleAttrList"
          :key="saleAttr.id"></el-option>
      </el-select>
      <!-- 添加销售属性按钮 -->
      <el-button type="primary" icon="el-icon-plus" @click="addAttr" :disabled="!attrIdAttrName">添加销售属性</el-button>
      <!-- 表格 -->
      <el-table :data="spuInfo.spuSaleAttrList" border stripe style="width: 100%;margin:20px 0">
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column label="属性名" prop="saleAttrName" width="150"></el-table-column>
        <el-table-column label="属性值名称列表" prop="spuSaleAttrValueList">

          <template slot-scope="{row,$index}">
            <el-tag :key="attr.id" v-for="(attr,index) in row.spuSaleAttrValueList" closable
              :disable-transitions="false" @close="handleClose(row.spuSaleAttrValueList,index)">
              {{attr.saleAttrValueName}}
            </el-tag>
            <el-input class="input-new-tag" v-if="row.edit" v-model="row.saleAttrValueName" ref="saveTagInput"
              size="small" @keyup.enter.native="handleInputConfirm(row)" @blur="handleInputConfirm(row)">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
          </template>

        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="{row,$index}">
            <!--这里注意有一个坑 就是气泡框的事件中 要一定加 'on' 文档中没有体现 -->
            <el-popconfirm :title="`您确定要删除吗？`" @onConfirm="deleteVal($index)">
              <HintButton slot="reference" size="mini" type="danger" icon="el-icon-delete" title="删除属性值" />
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 两个按钮 -->
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="back">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    name: 'SpuForm',
    props: ['visible'], //接收父组件传递的数据
    data() {
      return {
        // 收集数据
        spuInfo: {
          category3Id: '',
          description: '', //spu描述信息
          spuImageList: [], //图片数据信息
          spuName: '', //spu名称
          spuSaleAttrList: [], //销售属性
          tmId: '', //品牌id
        },
        spuImageList: [], // 所有的图片列表数据
        attrIdAttrName: '',
        trademarkList: [], // 所有的品牌列表数据
        // 上传图片所需的两个表达式
        dialogVisible: false,
        dialogImageUrl: '',
        saleAttrList: [], // 所有的销售属性数据
        fileList: [],
        spuInfoList: [], //spuInfo列表数据
        attrIdAttrName: '', // 用来存储选中的销售属性的id和名字的
        // 标签用的数据
        inputVisible: false,
        inputValue: '',
      }
    },
    // 计算属性
    computed: {
      // 计算出选择销售属性那里为动态的--未选中的
      unSelectedSaleAttrList() {
        // 解构出所有销售属性数组和spuInfo对象中的数组
        const {
          saleAttrList,
          spuInfo: {
            spuSaleAttrList
          }
        } = this
        // 数据过滤  留下的数组会返回到unSelectedSaleAttrList 数组中
        return saleAttrList.filter(sa => !spuSaleAttrList.some(ssa => ssa.saleAttrName === sa.name))
      }
    },
    methods: {
      // 返回到spu界面
      back() {
        this.$emit('update:visible', false)
      },
      // 修改spuInfo对象初始化方法
      initUpdateData(spuId) {
        this.spuId = spuId;
        this.spuId = spuId
        // 1. 根据spuId获取对应的spuInfo对象数据
        this.getSpuInfo()
        // 2. 获取所有的品牌信息数据
        this.getTrademarkList()
        // 3. 获取所有的销售属性数据
        this.getSaleAttrList()
        // 4. 获取当前的spuInfo对象中所有的图片信息数据
        this.getSpuImageList()
      },
      // 1. 根据spuId获取对应的spuInfo对象数据
      async getSpuInfo() {
        const result = await this.$API.spu.getSpuInfoById(this.spuId)
        // 判断
        this.spuInfo = result.data
      },
      // 2. 获取所有的品牌信息数据
      async getTrademarkList() {
        const result = await this.$API.trademark.getTrademarkList()
        this.trademarkList = result.data
      },
      // 3. 获取所有的销售属性数据
      async getSaleAttrList() {
        const result = await this.$API.spu.getBaseSaleAttrList()
        this.saleAttrList = result.data
      },
      // 4. 获取当前的spuInfo对象中所有的图片信息数据
      async getSpuImageList() {
        const result = await this.$API.sku.getSpuImageList(this.spuId)
        // 这里有一个注意点:当我们展示图片数据时
        // 拿到数组图片时和element-ui中的不一样 需要重新赋值
        // 使用的遍历将每一项的名字和图片地址重新赋值
        // console.log(result)
        // 保存数据
        const spuImageList = result.data
        spuImageList.forEach((item) => {
          item.name = item.imgName
          item.url = item.imgUrl
        })
        // 更新数据
        this.spuImageList = spuImageList
      },
      // 上传图片所需要的回调函数
      // 删除图片的回调
      handleRemove(file, fileList) {
        // fileList是一个移出图片之后的新数组
        this.spuImageList = fileList
      },
      // 预览图片相关的方法
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url //设置预览图片的地址
        this.dialogVisible = true // 是否需要开启预览
      },
      // 图片上传成功的回调函数
      handleAvatarSuccess(res, file, fileList) {
        // 图片上传成功之后  需要更新数组
        this.spuImageList = fileList
        if (res.code === 200) {
          // 此时图片上传成功,立刻把对应的图片地址保存起来
          this.formData.logoUrl = res.data
        }
        // 如果图片上传成功了,那么应该清理掉之前的表单验证的提示信息
        this.$refs.formData.clearValidate('logoUrl')
      },
      // 上传图片之前的回调
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg'
        // 限定上传图片的格式的
        const isJPG = ['image/jpeg', 'image/png'].includes(file.type)
        // 限制图片的大小
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      },
      // 标签相关方法
      handleClose(valueList, index) {
        valueList.splice(index, 1)
      },
      showInput(attr) {
        //判断当前对象中是否存在edit属性标识
        if (!attr.hasOwnProperty('edit')) {
          // 动态设置响应式数据属性
          // 第一个参数:设置给谁  第二个参数;属性名  第三个参数 开启或关闭
          this.$set(attr, 'edit', false)
        } else {
          // 有edit属性--开启编辑模式
          attr.edit = true
        }
        this.$nextTick(() => {
          // 获取焦点
          this.$refs.saveTagInput.focus();
        });
      },
      // 查看模式
      handleInputConfirm(attr) {
        const saleAttrValueName = attr.saleAttrValueName;
        // 如果文本框没有数据  需要设置为查看模式
        if (!saleAttrValueName || !saleAttrValueName.trim()) {
          attr.edit = false;
          return;
        }
        // 到这  说明文本框有数据
        // 此时需要判断里面不为空是否有没有重复的
        const isRepeat = attr.spuSaleAttrValueList.some(
          (item) => item.saleAttrName === saleAttrValueName.trim())
        //  在这说明没有重复的
        if (!isRepeat) {
          attr.spuSaleAttrValueList.push({
            // 添加数据
            baseSaleAttrId: attr.baseSaleAttrId,
            saleAttrValueName
          })
        } else {
          this.$message.warning('请输入了重复的数据,请您重新输入')
        }
        // 关闭编辑模式
        attr.edit = false
        // 清空文本框的名字
        attr.ssaleAttrValueName = ''
      },
      // 添加销售属性
      addAttr() {
        // 获取选中的下手属性数据中的id和名字
        const [
          baseSaleAttrId,
          saleAttrName
         ] = this.attrIdAttrName.split(':')
        // 向销售属性中添加数据
        this.spuInfo.spuSaleAttrList.push({
          baseSaleAttrId,
          saleAttrName,
          spuSaleAttrValueList: []
        })
        // 清空数据的操作
        this.attrIdAttrName = ""
      },
      // 删除spu属性值回调
      deleteVal(index) {
        this.spuInfo.spuSaleAttrList.splice(index, 1)
      },
      // 保存操作
      async save() {
        // 解构数据
        const {
          spuInfo,
          spuImageList
        } = this
        // 图片过滤后的数据放到spuInfo对象的spuImageList 数组中
        spuInfo.spuImageList = spuImageList.map((item) => ({
          imgName: item.name,
          // 如果有上传图片  图片的真正地址不在url里 而是在response.data中
          imgUrl: item.response ? item.response.data : item.imgUrl
        }))
        // 针对于销售属性的数据进行过滤的操作
        spuInfo.spuSaleAttrList = spuInfo.spuSaleAttrList.filter((item) => {
          // 如果新添加的销售睡醒中的存储属性值 的数组长度大于0 至少添加一个属性值
          if (item.spuSaleAttrValueList.length > 0) {
            delete item.edit //删除多余属性edit
            delete item.saleAttrValueName // 删除多余属性销售属性值名字
            return true
          }
          return false
        })
        // 调用接口 发请求
        // 在这里使用try.catch包裹
        try {
          await this.$API.spu.addOrUpdateSpuInfo(spuInfo)
          // 提示信息
          this.$message.success('操作成功')
          // 关闭对话框
          this.back()
          // 重置数据
          this.resetData()
          // 通知父级组件操作已经成功
          this.$emit('saveSuccess')
        } catch (error) {
          // 提示
          this.$message.error('保存失败')
        }
      },
      // 重置数据
      resetData() {
        this.spuInfo = {
            category3Id: '', //三级分类id
            description: '', //spu描述信息
            spuImageList: [], //图片数据信息
            spuName: '', //spu名称
            spuSaleAttrList: [], //销售属性
            tmId: '', //品牌id
          },
          this.spuImageList = [] // 所有的图片列表数据
        this.attrIdAttrName = ''
        this.trademarkList = [] // 所有的品牌列表数据
        // 上传图片所需的两个表达式
        this.dialogVisible = false
        this.dialogImageUrl = ''
        this.saleAttrList = [] // 所有的销售属性数据

      },
      // 添加spuInfo对象所需的初始化方法
      initAddData(category3Id){
        this.spuInfo.category3Id = category3Id
        // 获取所有的品牌信息数据
        this.getTrademarkList()
        // 获取所有的销售属性数据
        this.getSaleAttrList()
      }
    },
  }

</script>

<style>
  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

</style>
